<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
import {get_follow_list, get_keep_list} from "@/api/user.ts";
import {usePage} from "@/plugins/pagination.ts";

let pagination = usePage();
let keepActive = ref('keep')
let keepTabs = reactive([
  {
    label: '我关注的',
    value: 'keep'
  },
  {
    label: '关注我的',
    value: 'fans'
  }
])
let keep_list = ref<any>([])

watch(keepActive, (val: string) => {
  pagination.pageNo = 1;
  getList()
})

const getList = () => {
  if (keepActive.value == "keep") {
    get_keep_list(pagination).then((result: any) => {
      console.log(result)
      keep_list.value = result.data.data;
    })
  } else {
    get_follow_list(pagination).then((result: any) => {
      console.log(result)
      keep_list.value = result.data.data;
    })
  }

}

onMounted(() => {
  getList()
})
</script>

<template>
  <div class="content">
    <div class="utils">
      <div class="left">
        <Space :size="10" type="flex">
          <Button v-for="(item,i) in keepTabs" :key="i" :type="item.value == keepActive ? 'success' : ''"
                  @click="keepActive = item.value">{{ item.label }}
          </Button>
        </Space>
      </div>
    </div>
    <div class="keep_list">
      <div class="keep_item" v-for="(item,i) in keep_list" :key="i">
        <div class="keep_item_cont">
          <img class="outimg" :src="item.outimg">
          <div class="keep_item_info">
            <div class="name">
              {{ item.name }}
            </div>
            <div class="intro">
              {{ item.intro }}
            </div>
            <div class="btn">
              <Dropdown placement="bottom-start">
                <div class="followed">已关注</div>
                <template #list>
                  <DropdownMenu>
                    <DropdownItem>取消关注</DropdownItem>
                    <DropdownItem>发消息</DropdownItem>
                  </DropdownMenu>
                </template>
              </Dropdown>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.content {
  .utils {
    display: flex;
  }

  .keep_list {
    display: flex;
    flex-wrap: wrap;

    .keep_item {
      width: 33.33%;
      padding: 10px;

      .keep_item_cont {
        background-color: #fff;
        display: flex;
        padding: 15px;
        border-radius: 8px;

        .outimg {
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }

        .keep_item_info {
          margin-left: 20px;
          overflow: hidden;
          flex: 1;
          display: flex;
          flex-direction: column;

          .name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
          }

          .intro {
            font-size: 14px;
            color: #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .btn {
            margin-top: auto;

            .followed {
              display: inline-block;
              padding: 8px 16px;
              line-height: 1;
              background-color: #F6F7F8;
              color: #666;
              cursor: pointer;
              user-select: none;
              border-radius: 3px;
            }
          }
        }
      }
    }
  }
}
</style>